<script type="text/javascript" src="js/order.js"></script>
<h3 class="block-header">New PT1 Order #0000000231</h3>
<div style="text-align: right; margin: -50px 0px 15px 0px;">
    <a href="">
        <input type="button" value="Modify" />
    </a>
    <a href="">
        <input type="button" value="Disconnect" />
    </a>
</div>
<%
    for (int i = 0; i < 3; i++) {
%>
<div class="box" style="width: 100%; display: inline-block;">
    <div style="padding: 20px 30px;">
        <div>
            <div><h1>Premier TV</h1></div>
            <div style="padding-right: 45px; margin-top: -30px; text-align: right;">
                <span class="price">$ 5
                    <span class="cent">10<br/>/month</span>
                </span>                
            </div>
        </div>
        <div class="order-status">
            <span>Category:</span> 
            Internet

            <span>Status:</span> 
            Active
        </div>
        <div style="width: 100%; text-align: right;">
            <input class="view-det-btn" type="button" value="view detail >" />
        </div>
    </div>
</div>
<% }%>
<div id="fly-block">
    <div id="product-block">
        <div id="close">
            x
        </div>
        <div>
            <div><h1>Premier TV</h1></div>
            <div style="padding-right: 45px; margin-top: -30px; text-align: right;">
                <span class="price">$ 5
                    <span class="cent">10<br/>/month</span>
                </span>
            </div>
        </div>
        <br/>

        <h4 class="block-header">Settings</h4>
        <div class="table-view" style="padding: 10px 20px 10px 0px;">
            <%
                for (int i = 0; i < 10; i++) {
            %>
            <div>Setting <%= i%>:</div> 
            <div>Value</div>
            <% }%>

            <%
//                for (int i = 0; i < 5; i++) {
            %>
<!--            <div>Setting <% // i%>:</div> 
            <div><input type="text" maxlength="40" value="Default value"  disabled="disabled"/></div>-->
                <% // }%>

        </div>

        <h4 class="block-header">Components</h4>
        <span style="font-size: 15px; font-weight: bold;">Basic: </span>
        Some basics components...
<!--        <h4>Components groups:</h4>
        <div style="padding: 10px 10px 10px 34px;">
            <%
//                for (int i = 0; i < 5; i++) {
            %>
            <input type="checkbox"  value="0" disabled="disabled">Component group (included components)<br/>
            <div>$42,3</div>
            <% // }%>
        </div>-->
        <h4>Optional:</h4>
        <div class="table-view" style="padding: 10px 20px 10px 0px;">
            
            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div><input type="checkbox" name="" value="<%=i%>" disabled="disabled"> Component <%= i%></div> 
            <div>$12,3</div>
            <% }%>
        </div>
    </div>
</div>